import React, { Component } from 'react';
import {
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity
} from "react-native";
import { GLOBAL } from '../config/global';

const scale = GLOBAL.SCALE;
export class ImgWidthTextButton extends Component {
	static props = {
	}

	constructor(props) {
		super(props);
		this.state = {
			imgDefault: false
		}
	}

	render() {
		const { imgDefault } = this.state;
		const defaultImg = require('../imgs/report/Group5.png');
		return (
			<View style={styles.item}>
				<TouchableOpacity activeOpacity={1}
					onLongPress={() => { this.props.onLongPress(); }}
					onPress={() => { this.props.onPress(); }}>
					<Image source={imgDefault ? defaultImg : this.props.url} style={[styles.itemImg]} onError={(e) => {
						this.setState({ imgDefault: true })
					}} />
					<Text style={[styles.itemText]}>{this.props.text}</Text>
				</TouchableOpacity>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	item: {
		width: '100%',
		height: '100%',
		flexDirection: 'column',
		alignItems: 'center',
		justifyContent: 'center',
		position: 'relative',
		zIndex: 9,
	},
	itemImg: {
		alignSelf: 'center',
		height: 45 * scale,
		width: 45 * scale,
		marginBottom: 8 * scale,
	},
	itemText: {
		fontSize: 12 * scale,
		color: '#4B4B4B',
		textAlign: 'center',
	}
})